<template>
  <div class="container">
    <template>
      <el-button type="text" @click="dialogFormVisible = true" icon="el-icon-circle-plus-outline">添加用户</el-button><el-button style="color:red;" type="text" @click="open" icon="el-icon-remove-outline">批量删除用户</el-button>
      <el-dialog title="添加用户" :visible.sync="dialogFormVisible" width="25%">
        <el-form :model="form">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input style="width:240px" v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input style="width:240px" v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>
          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false; add()">添加</el-button>
        </div>
      </el-dialog>
      
      <div class="tableContainer">
        
        <el-table :data="tableData" border style="width: 100%;margin:auto;" :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }">
          <el-table-column  type="selection"></el-table-column>
          <el-table-column prop="id" label="用户id" width="70" fixed="left">
          </el-table-column>
          <el-table-column prop="username" label="用户名" width="180">
          </el-table-column>
          <el-table-column prop="password" label="密码" width="180">
          </el-table-column>
        </el-table-column>
          <el-table-column prop="power" label="用户权限" width="160">1：超级管理员 2：管理员 3：普通用户
          </el-table-column>
          <el-table-column prop="registerTime" label="注册时间" width="180">
          </el-table-column>
          <el-table-column prop="loginTime" label="最近一次登录时间" width="180">
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template slot-scope="scope">
              <el-button  size="mini">编辑</el-button>
              <el-button type="danger" size="mini" @click="handleClick(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      
    </div>
  
    </template>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  methods: {
    add() {
      axios.post("http://www.changbaiqi.com:8989/user/addUser", this.form).then(res => {
        console.log(res)
        if(res.data.state){
          axios.get("http://www.changbaiqi.com:8989/user/findAllUser").then(res => {
      this.tableData = res.data
    })
        }
      })
    },
    deleteUser(id) {
      console.log(id)
      axios.get("http://www.changbaiqi.com:8989/user/deleteUser?id=" + id).then(res => {
          this.findAllUser
          if(res.data.state){
            axios.get("http://www.changbaiqi.com:8989/user/findAllUser").then(res => {
      this.tableData = res.data
    })
          }
        
      })
    },
    handleClick(scope) {
      console.log(scope)
      this.deleteUser(scope.row.id)
      
    },
    findAllUser(){
      axios.get("http://www.changbaiqi.com:8989/user/findAllUser").then(res => {
      this.tableData = res.data
      console.log(res);
    })
    },open(){
      this.$confirm('此操作将批量删除选中用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        })
    }

  }, mounted() {
    this.findAllUser()
  },

  data() {
    return {
      tableData: [{
        
      }],
      dialogFormVisible: false,
      form: {
        username: '',
        password: '',
        code: '',
        id: '',
      },

      formLabelWidth: '60px'
    }
  }
}

</script>

<style lang="less" scoped>
.container {
  padding: 20px 50px;
}
.tableContainer{
  padding: 10px;
  
}
</style>